<script type="text/javascript">
		$(function() {
			$("#orderdate").datepicker();
			$("#sendingDate").datepicker();
			$("#deliveryDate").datepicker();


				// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
				//$( "#dialog:ui-dialog" ).dialog( "destroy" );

		});

		 

		
		$( "#cusomerInformation" ).dialog({
			height: 500,
			width: 500,
			modal: false,
			autoopen : false
		});

		$(document).ready(function(){
					$("#zipcode").autocomplete({
						  source: function(request, response){
						    $.post("<?=JSONURL?>/zipcodes", {keyword:request.term}, function(data){     
						        response($.map(data, function(item) {
						        return {
						            id: item.id,
						            zipcode: item.postal_code,
						            address: item.town + ", " + item.city+ ", " + item.perfecture 
						        }
						        }))
						    }, "json");
						  },
						  minLength: 2,
						  dataType: "json",
						  cache: false,
						  focus: function(event, ui) {
								$( "#zipcode" ).val( ui.item.zipcode);
								$( "#zipcode-id" ).val( ui.item.id);
								$( "#address" ).html( ui.item.address);
						    return false;
						  },
						  select: function(event, ui) {
							   $( "#zipcode" ).val( ui.item.zipcode);
								$( "#zipcode-id" ).val( ui.item.id);
								$( "#address" ).html( ui.item.address);
						    return false;
						  }
					}).data( "autocomplete" )._renderItem = function( ul, item ) {
						return $( "<li></li>" )
						.data( "item.autocomplete", item)
						.append( "<a>" + item.zipcode + "</a>" )
						.appendTo( ul );
				};

				$("#staffcode").autocomplete({
					  source: function(request, response){
					    $.get("<?=JSONURL?>/staff", {keyword:request.term}, function(data){     
					        response($.map(data, function(item) {
					        return {
					            id: item.id,
					            name: item.firstname + " " + item.maidenname + " " + item.surname
					        }
					        }))
					    }, "json");
					  },
					  minLength: 1,
					  dataType: "json",
					  cache: false,
					  focus: function(event, ui) {
							$( "#staffcode" ).val( ui.item.name);
							$( "#staffcode-id" ).val( ui.item.id);
							//$( "#address" ).html( ui.item.address);
					    return false;
					  },
					  select: function(event, ui) {
						   $( "#staffcode" ).val( ui.item.name);
							$( "#staffcode-id" ).val( ui.item.id);
					    return false;
					  }
				}).data( "autocomplete" )._renderItem = function( ul, item ) {
					return $( "<li></li>" )
					.data( "item.autocomplete", item)
					.append( "<a>" + item.name + "</a>" )
					.appendTo( ul );
			};


		});


		function verifyClientInformation(){

			
			var surname = $("#surname").val();
			var maidenname =$("#maidenname").val();
			var firstname =$("#firstname").val();
			var zipcode = $("#zipcode").val();
			var telephoneNo = $("#telephoneNumber").val();
			var staffcode = $("#staffcode").val();
			var streetname = $("#streetName").val();
			var streetnumber = $("#streetNumber").val();
			var apartmentname = $("#apartmentName").val();
			var roomnumber = $("#roomNumber").val();
			var searchOption = $("input[@name=searchoption]:checked").val();
			

			  $.ajax({
			        type: "POST",
			        url: "<?=JSONURL?>/customerverification",
			        data: {
					        _surname : surname,
					        _firstname :  firstname,
					        _zipcode : zipcode,
					        _telephone : telephoneNo,
							_streetname : streetname,
							_streetnumber : streetnumber,
							_apartmentname : apartmentname,
							_roomnumber : roomnumber,
							_searchingoption : searchOption
				        },
			        dataType: 'json',
			        success: function(data){
			        	$("#clientResultsTable").html("");
			        	 $('#clientsDiv').slideDown(10000, function() {

			 		     });
		        	    if(data.length == 0){
					       // alert("No Similar Data was Found.");
				        }
				        else{
				        	//alert("More than 1 record was found for entered Client Information");
				        }

		        		 
			        	 for(i=0;i<data.length;i++){
			        		 $("#clientResultsTable").append("<tr><td>"+data[i].firstname + " " + +data[i].id +"</td></tr>");
			        	 }
				        
			        },
			        error:function (xhr, ajaxOptions, thrownError){
	                  alert("Unexpected Error was Encountered.");
	                }    
			    });

			
			return false;

		}


		function postalcodesearch(object){
			if($(object).val().length > 3){
			  $.ajax({
			        type: "POST",
			        url: "http://localhost/sorriso/index.php/japanzipcodes",
			        data: {keyword: $(object).val()},
			        dataType: 'json',
			        success: function(data){
		
			        },
			        error:function (xhr, ajaxOptions, thrownError){
	                  alert("Unexpected Error was Encountered.");
	                }    
			    });
			}

	}
</script>

<?php if ($action == ''): ?>

	    <table width="100%" border="0" cellpadding="5">
	      <tr>
	        <td height="243" valign="top" bgcolor="#FFFFFF">
            <table width="100%" border="0" cellspacing="3">
	          <tr>
	            <td height="338" align="center" valign="top" bgcolor="#f7f7f7"><table width="98%" border="0" cellspacing="3" cellpadding="0">
	             <tr>
	                <td width="100%" height="22" align="left" valign="middle" bgcolor="#f7f7f7">
	               		<table width="100%">
	               			<tr ><td> <strong>Current {page}</strong></td>
	               			<td align="right"><strong><a href="{url}/{page}/create">Create New {caption}</a></strong></td></tr>
	              	    </table>
	                </td>
                  </tr>
	              <tr>
	                <td height="305" align="left" valign="top" bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="0" cellpadding="3">
	                  <tr>
	                    <td width="15%" align="center" valign="middle" bgcolor="#efeeee">Application ID</td>
	                    <td width="20%" align="center" valign="middle" bgcolor="#efeeee">Customer Name</td>
	                    <td width="15%" align="center" valign="middle" bgcolor="#efeeee">Staff Code</td>
	                    <td width="16%" align="center" valign="middle" bgcolor="#efeeee">Order Date</td>
	                    <td width="18%" align="center" valign="middle" bgcolor="#efeeee">Delivery Date</td>
	                    <td width="16%" height="28" align="center" valign="middle" bgcolor="#efeeee">Action</td>
                      </tr>
                    </table>
	                  <table width="100%" border="0" cellspacing="o" cellpadding="o" style="border-bottom:1px solid#CCC;">
	                    <tr>
	                      <td width="15%" height="33" align="center">0000000</td>
	                      <td width="20%" align="center">Juan Dela Cruz</td>
	                      <td width="15%" align="center">sc-0001</td>
	                      <td width="16%" align="center">2012-07-28</td>
	                      <td width="18%" align="center">2012-07-28</td>
	                      <td width="16%" align="center">&nbsp;</td>
                        </tr>
	                    <tr>
	                      <td height="33" align="center">0000000</td>
	                      <td align="center">Juan Dela Cruz</td>
	                      <td align="center">sc-0001</td>
	                      <td align="center">2012-07-28</td>
	                      <td align="center">2012-07-28</td>
	                      <td align="center">&nbsp;</td>
                        </tr>
	                    <tr>
	                      <td height="33" align="center">0000000</td>
	                      <td align="center">Juan Dela Cruz</td>
	                      <td align="center">sc-0001</td>
	                      <td align="center">2012-07-28</td>
	                      <td align="center">2012-07-28</td>
	                      <td align="center">&nbsp;</td>
                        </tr>
	                    <tr>
	                      <td height="33" align="center">0000000</td>
	                      <td align="center">Juan Dela Cruz</td>
	                      <td align="center">sc-0001</td>
	                      <td align="center">2012-07-28</td>
	                      <td align="center">2012-07-28</td>
	                      <td align="center">&nbsp;</td>
                        </tr>

                    </table></td>
                  </tr>
                </table></td>
              </tr>
            </table></td>
          </tr>
	      </table>
<?php elseif ($action == 'add' || $action == 'edit' ): ?>   

	    <table width="100%" border="0" cellpadding="5">
          <tr>
                <td width="100%" height="22" align="left" valign="middle" bgcolor="#f7f7f7">
	               <table width="100%">
	               <tr ><td> <strong>Add new {page}</strong></td>
	               <td align="right"></td></tr>
                  </table>
               </td>
          </tr>
	      <tr>
	        <td height="722" valign="top" bgcolor="#FFFFFF">
            <table width="100%" border="0" cellspacing="3">
	          <tr>
	            <td height="652" align="center" valign="top" bgcolor="#f7f7f7"><table width="98%" border="0" cellspacing="3" cellpadding="0">
	              <tr>
	                <td width="19%" align="left" valign="middle">Order Date</td>
	                <td  valign="middle"><input name="textfield" type="text" id="orderdate" size="30" /></td>
	                <td width="4%" valign="middle">&nbsp;</td>
	                <td width="18%" align="left" valign="middle">Staff Code</td>
	                <td width="29%" height="22" align="left" valign="middle">
	               	<input name="staffcode" type="text" id="staffcode" size="30" /></td>
                  	<input type="hidden" name="staffcode" id="staffcode-id"/>
                  	</td>
                  </tr>
	              <tr>
	                  <td valign="middle">Delivery Date</td>
	                <td height="22" align="left" valign="middle"><input name="deliveryDate" type="text" id="deliveryDate" size="30" /></td>
                 <td valign="middle">&nbsp;</td>
	               <td valign="middle">Delivery Time</td>
	                <td height="22" align="left" valign="middle"><input name="deliveryTime" type="text" id="deliveryTime" size="20" />
	                  <label for="select"></label>
	                  <select name="deliveryTimePost" size="1" id="select">
                    	<option>am</option>
                        <option>pm</option>
                    </select>
                    </td>
                   </tr>
	              <tr>
	                <td align="left" valign="middle">Surname</td>
	                <td valign="middle">
	                <input name="surname" type="text" id="surname" size="30" /></td>
	                <td valign="middle">&nbsp;</td>
	                <td valign="middle">Tel. No.</td>
	                <td height="22" align="left" valign="middle"><input name="telephoneNumber" type="text" id="telephoneNumber" size="30" /></td>
                
	                 </tr>
	              <tr>
	                <td align="left" valign="middle">Firstname</td>
	                <td valign="middle"><input name="firstname" type="text" id="firstname" size="30" /></td>
	                <td valign="middle">&nbsp;</td>
	                <td valign="middle">Mobile No.</td>
	                <td height="22" align="left" valign="middle">
	                <input name="mobileno" type="text" id="mobileno" size="30"/></td>
                
	               </tr>
	              <tr>
	                 <td align="left" valign="middle">Maiden</td>
	                <td valign="middle"><input name="maidenName" type="text" id="maidenName" size="30" /></td>
	                <td valign="middle">&nbsp;</td>
	 			    <td valign="middle">Zipcode</td>
	                <td height="22" align="left" valign="middle">
	                <input name="zipcode" type="text" id="zipcode" size="30" />
                  	<input type="hidden" name="zipcodeid" id="zipcode-id"/>
                  	</td>
                  </tr>
                  
                </table>
	              <table width="98%" border="0" cellspacing="3" cellpadding="o">
	                <tr>
	                  <td height="16" valign="top">Address
	                   </td>
                    </tr>

	                <tr>
	                  <td height="20" valign="top"><label for="textarea"></label>
                      <textarea name="address" id="address" cols="83" rows="2"></textarea></td>
                    </tr>
                </table>
	              <table width="98%" border="0" cellspacing="3" cellpadding="0">
	                <tr>
	                  <td width="19%" align="left" valign="middle">Street Name</td>
	                  <td width="30%" valign="middle"><input name="streetName" type="text" id="streetName" size="30" /></td>
	                  <td width="4%" valign="middle">&nbsp;</td>
	                  <td width="18%" align="left" valign="middle">Street No</td>
	                  <td width="29%" height="22" align="left" valign="streetNumber"><input name="streetNumber" type="text" id="streetNumber" size="30" /></td>
                    </tr>
	                <tr>
	                  <td align="left" valign="middle">Apartment Name</td>
	                  <td valign="middle"><input name="apartmentName" type="text" id="apartmentName" size="30" /></td>
	                  <td valign="middle">&nbsp;</td>
	                  <td valign="middle">Room No</td>
	                  <td height="22" align="left" valign="middle"><input name="roomNumber" type="text" id="roomNumber" size="30" /></td>
                    </tr>
                    <tr>
	                  <td colspan="5">
	                  	  <div style="float:right"><input checked type="radio" name="searchoption"  value="and"> All condtion must be true <input type="radio" name="searchoption"  value="or"> Atleast one condtion is true <img height="30px" width="30px" src="/assets/images/searchclient.png" onclick="return verifyClientInformation();"/></div>
	              		  <br><br>
	              		  <div width="100%" style="background-color:white;height:300px;display:none" id="clientsDiv">
	              		  		<table  width="100%">
	              		  		<tr>
	              		  			<td>
	              		  				Clients with Similar data for Name or Telephone Number or Postal code.
	              		  			</td>
	              		  		</tr>
	              		  		<tr>
	              		  			<td>
	              		  				<div width="100%" > 
	              		  				
	              		  					<table id="clientResultsTable">
	              		  					
	              		  					
	              		  					</table>
	              		  				</div>
	              		  			</td>
	              		  		</tr>
	              		  		
	              		  		</table>
	              		  
	              		  </div>
	                  </td>
	               </tr>
                </table>
	              <table width="98%" border="0" cellspacing="3" cellpadding="o">
	                <tr>
	                  <td width="33%" align="left" valign="top"><table width="297" height="208" border="0" cellpadding="o" cellspacing="3">
	                    <tr>
	                      <td height="26" valign="top">Price</td>
                        </tr>
	                    <tr>
	                      <td width="329" height="157" valign="top">
                          <table width="291" height="185"  cellpadding="o" cellspacing="o" style="border:1px solid#CCC;">
	                        <tr>
	                          <td width="256" height="183" valign="top" bgcolor="#FFFFFF"><table width="95%" border="0" cellspacing="4" cellpadding="o">
	                            <tr>
	                              <td width="51%">Price</td>
	                              <td width="49%" height="26"><input name="price" type="text" id="price" size="20" /></td>
	                              </tr>
	                            <tr>
	                              <td>Tax</td>
	                              <td height="27"><input name="tax" type="text" id="tax" size="20" /></td>
	                              </tr>
	                            <tr>
	                              <td>Discount</td>
	                              <td height="26"><input name="discount" type="text" id="discount" size="20" /></td>
	                              </tr>
	                            <tr>
	                              <td>Del.Charge</td>
	                              <td height="26"><input name="deliveryCharge" type="text" id="deliveryCharge" size="20" /></td>
	                              </tr>
	                            <tr>
	                              <td>Total Amount</td>
	                              <td height="26"><input name="totalAmount" type="text" id="totalAmount" size="20" /></td>
	                              </tr>
                              </table></td>
                            </tr>
                          </table></td>
                        </tr>
                      </table></td>
	                  <td width="67%" height="220" valign="top"><table width="100%" border="0" cellspacing="o" cellpadding="o">
	                    <tr>
	                      <td width="48%" height="28" align="center">Product Code</td>
	                      <td width="52%" align="center">PCS.</td>
                        </tr>
                      </table>
	                    <table width="376" height="168"  cellpadding="o" cellspacing="o" style="border:1px solid#CCC;">
	                      <tr>
	                        <td width="374" height="166" valign="top" bgcolor="#FFFFFF">
	                        <table width="100%" border="0" cellspacing="4" cellpadding="0" id="productListTable">
                             </table>
                             <table width="100%" border="0" cellspacing="4" cellpadding="0">
	                          <tr>
	                            <td height="26" align="right">
	                            <input name="button" type="button" class="btnSubmit" style="width: 100px" id="button" value="Add Individual" onclick="return addAnother('productListTable','productListHiddenTable');"/>
	                            <input name="button" type="button" class="btnSubmit" style="width: 100px" id="button" value="Add Set" onclick="return addAnother('productListTable','setListHiddenTable');"/>
	                            
	                            </td>
                              </tr>
                            </table></td>
                          </tr>
                      </table></td>
                    </tr>
                </table>
	              <table width="98%" border="0" cellspacing="3" cellpadding="0">
	                <tr>
	                  <td width="18%" align="left" valign="middle">Memo</td>
	                  <td width="24%" valign="middle">&nbsp;</td>
	                  <td width="2%" valign="middle">&nbsp;</td>
	                  <td width="28%" align="left" valign="middle">Freebies/Inserts</td>
	                  <td width="28%" height="22" align="left" valign="middle">&nbsp;</td>
                    </tr>
	                <tr>
	                  <td colspan="2" align="left" valign="middle"><label for="textarea2"></label>
                      <textarea name="memo" id="memo" cols="30" rows="5"></textarea></td>
	                  <td valign="middle">&nbsp;</td>
	                  <td height="22" colspan="2" valign="middle"><textarea name="freebies" id="freebies" cols="30" rows="5"></textarea></td>
                    </tr>
	                <tr>
	                  <td colspan="2" align="left" valign="middle">&nbsp;</td>
	                  <td valign="middle">&nbsp;</td>
	                  <td height="22" colspan="2" align="right" valign="middle"><input name="button2" type="submit" class="btnSubmit" id="button2" value="Save" /></td>
                    </tr>
                </table></td>
              </tr>
            </table></td>
          </tr>
	      </table>
	      <div id="" style="display:none">
	      		            <table width="100%" border="0" cellspacing="4" cellpadding="0" id="productListHiddenTable">
	                          <tbody>
	                          <tr>
	                            <td width="47%" align="center">
	                            <input type="hidden" name="productType[]" value="I"/>
	                            <select name="product[]" id="produc[]" style="width:150px">
	                            
					                  <option value="" >--select item--</option>
					                  <?php if (isset($itemList)): ?>
					                   <!-- ALTERNATIVE FOR FOREACH -->
					                   {itemList}
					                	<option value="{id}" >{code}</option>
					                   {/itemList}
									  <?php endif; ?> 
									 </select>
	                            </td>
	                            <td width="53%" height="26" align="center"><input name="pieces[]" type="pieces[]" id="textfield20" size="20" />
	                            <img src="/assets/images/delete.gif" onclick="return deleteRow(this);"/></td>
                              </tr>
                              </tbody>
                            </table>
                             <table width="100%" border="0" cellspacing="4" cellpadding="0" id="setListHiddenTable">
	                         <tbody>
	                          <tr>
	                            <td width="47%" align="center">
	                            <input type="hidden" name="productType[]" value="S"/>
		                            <select name="product[]" id="produc[]" style="width:150px">
		                             <option value="" >--select set--</option>
					                  <?php if (isset($setList)): ?>
					                   <!-- ALTERNATIVE FOR FOREACH -->
					                   {setList}
					                	<option value="{id}" >{code}</option>
					                   {/setList}
									  <?php endif; ?> 
									 </select>
	                            
	                            </td>
	                            <td width="53%" height="26" align="center"><input name="pieces[]" type="pieces[]" id="textfield20" size="20" />
	                            <img src="/assets/images/delete.gif" onclick="return deleteRow(this);"/></td>
                              </tr>
                            </tbody>
                            </table>
	      </div>
	      
	      
		<div id="cusomerInformation" title="Customer Information" style="display: none">
				Customer Information:
		</div>
	      
<?php endif; ?> 